// import { fromLonLat } from 'ol/proj';
import { transformNowToLonlat, removeDomById, radarInfoTips, shipInfoTips } from "./util"

const radarId = "RADAR_ID"

export default {
  data() {
    return {
      mapZoomIndex: null,
      selectFeature: null,
    }
  },
  methods: {
    initMapMethod(map) {
      map.on('pointermove', (evt) => {
        // 鼠标变手
        map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
        this.MapCoordinate = transformNowToLonlat(evt.coordinate)
        var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
          return feature;
        });
        if (feature) {
          if (!this.selectFeature) {
            if (feature.values_) {
              if (feature.values_.drawType === "radar") {
                this.selectFeature = feature
                radarInfoTips(feature.values_, evt.coordinate, this.map, radarId)
              }
              if (feature.values_.detail) {
                if (feature.values_.detail.arpaType === "0" || feature.values_.detail.arpaType === "2") {
                  this.selectFeature = feature
                  const info = {
                    time: feature.values_.detail.data.time,
                    targetNum: feature.values_.detail.data.targetNum
                  }
                  shipInfoTips(info, evt.coordinate, this.map, radarId)
                }
              }
            }
          }
        } else {
          this.selectFeature = null
          removeDomById(radarId)
        }
      })

      // 点击事件
      map.on('click', (evt) => {
        // 根据坐标查找到对应位置的feature
        var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
          return feature;
        });

        if (feature) {
          if (feature.id_ && feature.values_.sty === "sp") {
            this.shipOnclickFn(feature)
          }
        }
      });
      // 关键事件：地图缩放的时候触发事件
      var mview = map.getView()
      this.mapZoomIndex = mview.getZoom();
      map.on('movestart', () => {
        // console.log('move start...');

      });
      map.on('moveend', () => {
        if (mview.getZoom() !== this.mapZoomIndex) {
          this.mapZoomIndex = mview.getZoom();
        }
      });
      // 鼠标拖动事件
      map.on("pointerdrag", () => {
        this.isTracking = false
      });
    },
    getMapZoomType(val) {
      if (val < this.styleMinLimit) {
        return 1
      } else if (val < this.styleMaxLimit) {
        return 2
      } else {
        return 3
      }
    }
  },
  watch: {
    mapZoomIndex(val, oldVal) {
      if (this.getMapZoomType(val) !== this.getMapZoomType(oldVal)) {
        // 比例尺切换后，更换船舶的样式
        // this.refreshShipStyle()
      }
      // 更换轨迹显示的点数
      // if (this.trajectorysShow) {
      //   let layerTmp = this.map.getLayers().getArray().find(m => m.get("name") === "TRAJECTORY");
      //   if (layerTmp) {
      //     this.map.removeLayer(layerTmp)
      //   }
      //   this.showShipLine()
      // }
    }
  }
}
